<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 API Drag and Drop</title>
    <style>
        .src {
            display: flex;
        }
        
        .dragable {
            flex: 1;
        }
        
        .txt {
            color: green;
        }
        
        #target {
            width: 800px;
            height: 800px;
            line-height: 100px;
            text-align: center;
            border: 1px solid gray;
            color: red;
        }
        
        p {
            cursor: pointer;
        }
        
        .ds {
            background-color: rgba(0, 0, 0, 0.1);
        }
        
        #target.hover {
            border: 3px dashed green;
        }
    </style>
</head>

<body>
    <!-- source drag  -->
    <div class="src">
        <div class="dragable">
            <div class="txt" id="txt">
                所有的文字都可以拖拽
                <p draggable="true">此段文字设置了属性draggable="true"</p>
            </div>
        </div>
        <div id="target">Drop here</div>
    </div>
    <!-- des drop-->
    <script>
        let dragSrc = document.getElementById('txt'); // drag 
        let target = document.getElementById('target'); // drop
        // 事件 刚开始拖拽
        // 红宝书  addEventListener有什么区别？ on+事件名  
        // addEventListener 级别的事件 
        // ie  attachEvent
        dragSrc.ondragstart = handle_start;
        // 在拖的过程会一直执行
        dragSrc.ondrag = handle_drag;
        dragSrc.ondragend = handle_end;
        // drop 添加了三个事件
        target.ondragenter = handle_enter;
        target.ondragover = handle_over;
        target.ondragleave = handle_leave;
        target.ondrop = handle_drop;

        function handle_drop(event) {
            // 浏览器默认的拖拽行为是用相应的解析器打开拖拽的文件
            event.preventDefault();
            // console.log('当元素在目的地放下时时触发');
            target.innerHTML = dragSrc.innerHTML;
            // target.appendChild(dragSrc);
        }

        function handle_enter(event) {
            event.preventDefault();
            // console.log('handle_enter -当元素进入目的地时触发');
            target.classList.add('hover');
        }

        function handle_over(event) {
            event.preventDefault();
            // console.log('over');
        }

        function handle_leave() {
            console.log('handle_enter -当元素离开目的地时触发');
            target.classList.remove('hover');
        }

        function handle_start(e) {
            // console.log('-----');
            // 细分， drag start 事件 
            // 被按 css 去做 
            dragSrc.classList.add('ds');
            console.log('开始拖');
        }

        function handle_drag() {
            console.log('拖中');
            dragSrc.classList.remove('ds');
        }

        function handle_end() {
            console.log('放手了');
        }
    </script>
</body>

</html>